<template>
	<view class="detail" :style="{ paddingTop: statusBarHeight + menuButtonHeight + 16 + 'px' }">
		<view class="info">
			<view class="bg" :style="{ top: -(statusBarHeight + menuButtonHeight + 16) + 'px' }">
				<image src="https://adminshop.12sxb.cn/uploads/detail-bg.png" mode="widthFix" style="width: 100%"></image>
			</view>
			<view class="back" @click="onBack" :style="{ top: -statusBarHeight + 'px' }">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="info-inner">
				<view class="user-info flex align-center">
					<view class="avatar"><image :src="info.user.avatar" mode="widthFix" style="width: 100%"></image></view>
					<view class="user-name">
						<view class="flex align-center">
							<view v-if="info.type_id" class="type">{{ getTypeText() }}</view>
							<view class="name">{{ info.user.nickname }}</view>
						</view>
						<view class="time">{{ formateDate(info.createtime) }}</view>
					</view>
					<view class="level" :class="[`level${info.expire_days}`]">{{ levelText[info.expire_days] }}</view>
					<view class="complaint" @click="showComplaint = true">投诉</view>
				</view>
				<view class="desc">{{ info.content }}</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center area">
						<image src="/static/images/addr.png" mode="widthFix" style="width: 48rpx"></image>
						<text class="area-text ml-8">{{ info.area }}</text>
					</view>
					<view class="poster" @click="hanlePoster">
						<view>
							<view>生成</view>
							<view>海报</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between mt-14">
					<view class="flex align-center" @click="handleLike">
						<image src="/static/images/zan.png" mode="widthFix" style="width: 48rpx"></image>
						<view class="like-num">{{ info.like_num }}</view>
					</view>
					<view>{{ info.browse_num }}人浏览，{{ info.like_num }}人点赞</view>
				</view>
			</view>
		</view>
		<view class="box" @click="handleContact">
			<view class="bg"><image src="/static/images/detail-phone.png" mode="widthFix" style="width: 100%"></image></view>
			<view class="contact-box">
				<view class="contact-name">联系人：{{ info.user.nickname }}</view>
				<view class="contact-desc">联系时请告知在人人聚便民通上看到的</view>
			</view>
		</view>
		<view class="box banner">
			<swiper
				class="swiper"
				circular
				:indicator-dots="true"
				:autoplay="true"
				:interval="2000"
				:duration="500"
				indicator-active-color="#fff"
				indicator-color="rgba(0,0,0,.2)"
			>
				<swiper-item class="sitem" v-for="(item, index) in bannersList" :key="index">
					<image :src="'https://adminshop.12sxb.cn' + item.url" mode="scaleToFill" style="width: 100%"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="box total flex item-center">
			<view class="avatar"><image :src="info.user.avatar" mode="widthFix" style="width: 100%"></image></view>
			<view class="user-name">
				<view>{{ info.user.nickname }}</view>
				<view class="count">发布了{{ info.user_count }}条</view>
			</view>
		</view>
		<view class="list">
			<view class="title flex justify-center"><image src="/static/images/you-like.png" mode="widthFix" style="width: 228rpx"></image></view>
			<view>
				<block v-if="localList.length > 0">
					<wanl-local-list
						ref="findListRef"
						:dataList="localList"
						:last_page="last_page"
						:current_page="params.page"
						:isComment="common.appConfig.comment_switch"
						currentItemId="find"
						:height="wanlsys.windowHeight"
						:width="wanlsys.windowWidth - 48"
					></wanl-local-list>
				</block>
				<block v-if="localList.length === 0 && status !== 'loading'"><wanl-empty :text="empty" /></block>
				<uni-load-more v-if="localList.length > 0" :status="status" :content-text="contentText" />
			</view>
		</view>
		<poster v-if="createPoster" :show.sync="showPoster" :info="info" @hide="showPoster = false" />
		<complaint :show.sync="showComplaint" :info="info" @hide="showComplaint = false" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { formatTimestamp } from '@/utils/index.js';
import WanlLocalList from '@/components/wanl-local/lists.vue';
import WanlEmpty from '@/components/wanl-empty/wanl-empty.vue';
import poster from '@/components/wanl-local/poster.vue';
import complaint from '@/components/wanl-local/complaint.vue';

export default {
	components: {
		WanlEmpty,
		WanlLocalList,
		poster,
		complaint
	},
	data() {
		return {
			info: {
				user: {
					avatar: ''
				},
				typeName: '',
				time: ''
			},
			levelText: {
				7: '周会员',
				30: '月会员',
				90: '季会员',
				10: '年会员'
			},
			typeList: [],
			bannersList: [],
			statusBarHeight: 0,
			menuButtonHeight: 0,
			localList: [],
			params: {
				page: 1
			},
			reload: false, //判断是否上拉
			last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			},
			pagesNum: 1,
			empty: '暂未发布内容~',
			wanlsys: {},
			showPoster: false,
			showComplaint: false,
			createPoster: true
		};
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		formateDate(time) {
			return formatTimestamp(time);
		},
		getTypeText() {
			let text = this.typeList.find(item => item.value == this.info.type_id)?.text;
			return text;
		},
		handleContact() {
			uni.makePhoneCall({
				phoneNumber: this.info.user.mobile
			});
		},
		// 分享
		hanlePoster() {
			this.showPoster = true;
		},
		onBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 点赞
		handleLike() {
			uni.request({
				url: '/wanlshop/local_life/addlike?id=' + this.info.id,
				success: res => {
					this.info.like_num = this.info.like_num + 1;
					uni.showToast({
						title: '点赞成功',
						icon: 'success'
					});
				}
			});
		},
		getInfo() {
			uni.request({
				url: '/wanlshop/local_life/getinfo?id=' + this.info.id,
				success: res => {
					this.info = res.data;
					this.getLocalList();
					this.info.typeName = this.getTypeText();
					this.info.time = this.formateDate(this.info.createtime);
					// const data = {
					// 	page: 'pages/local/detail',
					// 	scene: {
					// 		id: this.info.id + '',
					// 		r: 'g'
					// 	},
					// 	width: 74,
					// 	env: this.common.appConfig.poster_env
					// };
					// const url = this.$wanlshop.config('appurl') + '/wanlshop/common/mpQrcode?data=' + encodeURIComponent(JSON.stringify(data));
					// uni.getImageInfo({
					// 	src: url,
					// 	success: res => {
					// 		this.info.minQrcode = res.path;
					// 		this.createPoster = true;
					// 	},
					// 	fail: res => {
					// 		console.log(res);
					// 	}
					// });
				}
			});
		},
		getQrCode() {
			const data = {
				scene: {
					id: this.info.id
				},
				page: '/pages/local/detail',
				width: 74,
				env: this.common.appConfig.poster_env
			};
			uni.request({
				url: '/wanlshop/common/mpQrcode?data=' + encodeURIComponent(JSON.stringify(data)),
				success: res => {
					this.info.qrcode = res.data;
					this.createPoster = true;
				}
			});
		},
		getBanners() {
			uni.request({
				url: '/common/banners?type=1',
				success: res => {
					this.bannersList = res.data;
				}
			});
		},
		getLocalList() {
			const { page } = this.params;
			const { type_id, province, city, area } = this.info;
			uni.request({
				url: `/wanlshop/local_life/getList?type_id=${type_id}&province=${province}&city=${city}&area=${area}&page=${page}`,
				type: 'get',
				success: res => {
					uni.stopPullDownRefresh();
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					this.localList = this.reload ? res.data.data : this.localList.concat(res.data.data);
					this.params.page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
				}
			});
		}
	},
	onReachBottom() {
		if (this.params.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.params.page = this.params.page + 1; //页码+1
			this.status = 'loading';
			this.getLocalList();
		}
	},
	onLoad(options) {
		const type = uni.getStorageSync('localType');
		if (options.id) {
			this.info.id = options.id;
		}
		if (type) {
			this.typeList = type;
		}

		const sys = uni.getSystemInfoSync();
		this.wanlsys = {
			headTop: sys.statusBarHeight,
			windowWidth: sys.windowWidth,
			windowHeight: sys.windowHeight,
			windowBottom: 0
		};
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.menuButtonHeight = menuButtonInfo.height;
		this.statusBarHeight = menuButtonInfo.top;

		this.getInfo();
		this.getBanners();
	}
};
</script>

<style lang="scss" scoped>
.detail {
	.back {
		position: absolute;
		top: 0;
		left: 0;
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}
	.info {
		position: relative;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.info-inner {
			position: relative;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(23, 71, 205, 0.27);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			top: 0;
			width: calc(100% - 64rpx);
			box-sizing: border-box;
			margin: 0 32rpx;
			padding: 20rpx 26rpx;
		}
		.user-name {
			flex: 1;
			margin-left: 20rpx;
		}
		.name {
			font-size: 32rpx;
			margin-left: 16rpx;
			color: #333333;
		}
		.complaint {
			font-size: 24rpx;
			color: #999;
			position: absolute;
			right: 20rpx;
			top: 72rpx;
		}
		.level {
			right: 0;
			top: 0;
			width: 154rpx;
			height: 62rpx;
			text-align: center;
			line-height: 62rpx;
			color: #fff;
			position: absolute;
			background: #ffae26;
			box-shadow: -2rpx 6rpx 28rpx 0rpx #ffe2b2;
			border-radius: 16rpx 0rpx 16rpx 0rpx;
			.level7 {
				background: #ed3a10;
			}
			.level30 {
				background: #4aa2fe;
			}
			.level90 {
				background: #c72afb;
			}
			.level365 {
				background: #fec619;
			}
		}
		.type {
			width: 146rpx;
			height: 50rpx;
			background: #1747cd;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
		}
		.time {
			color: #999999;
			font-size: 24rpx;
			margin-top: 8rpx;
		}
		.desc {
			font-size: 24rpx;
			color: #333333;
			margin: 48rpx 0;
			font-weight: bold;
			line-height: 48rpx;
		}
		.area {
			font-size: 28rpx;
			color: #666666;
		}
		.mt-14 {
			margin-top: 14rpx;
		}
		.ml-8 {
			margin-left: 8rpx;
		}
		.poster {
			background: #eaf2ff;
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			color: #1747cd;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: -40rpx;
		}
	}
	.avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.box {
		margin: 32rpx;
		position: relative;
	}
	.total {
		margin: 60rxp 0;
		.avatar {
			margin-right: 24rpx;
		}
		.count {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}
	.contact-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 36rpx 44rpx 26rpx 44rpx;
		font-size: 32rpx;
		color: #333;
		.contact-desc {
			color: #666666;
			font-size: 28rpx;
			margin-top: 6rpx;
		}
	}
	.banner {
		.swiper {
			height: 200rpx;
			border-radius: 30rpx;
			overflow: hidden;
		}
	}
	.list {
		.title {
			margin: 30rpx 0;
		}
	}
}
</style>
